<template>
	<view class="content">
		<view class="uni-padding-wrap">
					<view class="page-section swiper">
						<view class="page-section-spacing">
							<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
								<swiper-item>
									<view class="swiper-item uni-bg-red">A</view>
								</swiper-item>
								<swiper-item>
									<view class="swiper-item uni-bg-green">B</view>
								</swiper-item>
								<swiper-item>
									<view class="swiper-item uni-bg-blue">C</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
				<view class="swiper-list">
					<view class="uni-list-cell uni-list-cell-pd">
						<view class="uni-list-cell-db">指示点</view>
						<switch :checked="indicatorDots" @change="changeIndicatorDots" />
					</view>
					<view class="uni-list-cell uni-list-cell-pd">
						<view class="uni-list-cell-db">自动播放</view>
						<switch :checked="autoplay" @change="changeAutoplay" />
					</view>
				</view>
				<view class="uni-padding-wrap">
					<view class="uni-common-mt">
						<text>幻灯片切换时长(ms)</text>
						<text class="info">{{duration}}</text>
					</view>
					<slider @change="durationChange" :value="duration" min="500" max="2000" />
					<view class="uni-common-mt">
						<text>自动播放间隔时长(ms)</text>
						<text class="info">{{interval}}</text>
					</view>
					<slider @change="intervalChange" :value="interval" min="2000" max="10000" />
				</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				            indicatorDots: true,
				            autoplay: true,
				            interval: 2000,
				            duration: 500
			}
		},
		onLoad() {

		},
		methods: {

        changeIndicatorDots(e) {
            this.indicatorDots = !this.indicatorDots
        },
        changeAutoplay(e) {
            this.autoplay = !this.autoplay
        },
        intervalChange(e) {
            this.interval = e.target.value
        },
        durationChange(e) {
            this.duration = e.target.value
        }
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
